<template>
    <div>
        <el-card>
            <div id="main" style="width: 58%; height: 400px;" class="myDiv">

            </div>
            <div style="width: 36%; height: 400px;" class="myDiv">
                <el-table :data="SaleData" stripe ref="multipleTable" >

                <el-table-column prop="Xsid" label="编号" width="50px">
                </el-table-column>
                
                <el-table-column prop="name" label="商品类型" width="100px">
                </el-table-column>
                <el-table-column prop="Total" label="销售总额">
                </el-table-column>
                <el-table-column prop="Quantity" label="销售数量">
                </el-table-column>
                <el-table-column prop="Ymonth" label="月份">
                </el-table-column>

            </el-table>

            <el-pagination style="margin-top: 30px;" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page="page" :page-size="size"
                :page-sizes="[5, 10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="count">
            </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>

//import { turn } from 'core-js/core/array';
import * as echarts from 'echarts'

    export default {
       name:'saleView',
       data () {
            return {
                datas: [],
                month:[],
                size: 5,
                page: 1,
                SaleData:[]
            }
        },
        created(){
        this.axios({
        method: 'get',
        url: 'Sale'
        }).then(response => {
         //response.data;
        this.datas = response.data.data;
        console.log('datas: ', response.data.data);
        this.month=this.datas.filter(v=>v.Type==1).map(({ Ymonth }) => ({ Ymonth }));
        });
        this.getUsersList();
       },
       async mounted(){
            try{
            var response = await axios.get('Sale');
            var data = response.data;

            var myChar=echarts.init(document.getElementById('main'));

            var SanData = this.datas.filter(v=>v.Ymonth===3).map(item => item.Quantity);

            var SiData = this.datas.filter(v=>v.Ymonth===4).map(item => item.Quantity);

            var YData = this.datas.filter(v=>v.Xsid<10).map(item => item.name);


            var option ={
                title:{
                    text:'销售报表'
                },
                tooltip:{},
                legend:{
                    type: 'scroll',
                    orient: 'vertical',
                    right:20,
                    top:20,
                    bottom: 20,
                    data:['3月','4月'],
                },
                xAxis:{
                    type: 'category',
                    data:YData
                },
                yAxis:{
                    type:'value',
                },
                series:[
                    {
                        name:'3月',
                        type:'bar',
                        itemStyle: {
                        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        // { offset: 0, color: '#83bff6' },
                        // { offset: 0.5, color: '#188df0' },
                        // { offset: 1, color: '#188df0' }
                        // ])
                    },
                    emphasis: {
                        itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#2378f7' },
                            { offset: 0.7, color: '#2378f7' },
                            { offset: 1, color: '#83bff6' }
                        ])
                        }
                    },
                        data:SanData,
                    },
                    {
                        name:'4月',
                        type:'bar',
                        itemStyle: {
                        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        // { offset: 0, color: '#FFC0CB' },
                        // { offset: 0.5, color: '#FF0000' },
                        // { offset: 1, color: '#8B0000' }
                        // ])
                    },
                    emphasis: {
                        itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#8B0000' },
                            { offset: 0.7, color: '#FF0000' },
                            { offset: 1, color: '#FFC0CB' }
                        ])
                        }
                    },
                        data:SiData,
                    }
                ]
            };
            
            myChar.setOption(option);

            }catch (error) {
                console.log('Error fetching data:', error);
            }
            
        },
       methods:{
             //获取用户列表数据
        getUsersList() {
            this.axios({
                method: 'get',
                url: 'SalePage',
                params: { page: this.page, limit: this.size },
                data: {},
                //headers:{Authorization: this.user.Token}
            }).then(res => {
                //console.log('res: ', res);
                this.count = res.data.count;
                this.SaleData = res.data.data;
            }).catch(err => {
                console.log('err: ', err);
            })
        },
                //切换每页条数
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.page = 1;
            this.size = val;
            this.getUsersList();
        },
        //翻页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val;
            this.getUsersList();
        },
       }
    }
</script>
<style scoped>
    .myDiv{
        /* position: relative; */
        float: left;
    }
</style>